<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>{{ msg }}</h1>
		
		<nav>
			<router-link :to="{ name: 'home' }">Home</router-link> |
			<router-link :to="{ name: 'about'}">About</router-link> |
			<router-link :to="{ path: '/help' }">Help</router-link>
		</nav>
		
		<div style="border: 2px solid #333">
			<router-view></router-view>
		</div>
	</div>
	
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
	<script>
		// 1. 定义 (路由) 组件。
		const HomeView = { // /
			template: `
				<div>
					<h2>Home Page</h2>
					<ul>
						<li v-for="item of list">
							<!--<router-link :to="{ name: 'product-detail', params: { _id: item.id } }">{{ item.name }}</router-link>-->
							<router-link :to="{ name: 'product-detail', params: { _id: item.id, pn: item.name }, query: { from: 'home' } }">{{ item.name }}</router-link>
						</li>
					</ul>
				</div>
			`,
			data() {
				return {
					list: [
						{ id: 123, name: "水壶" },
						{ id: 1123, name: "咖啡" },
						{ id: 13, name: "茶叶" },
						{ id: 23, name: "手表" },
						{ id: 3, name: "红糖" },
					]
				}
			}
		}
		const AboutView = { // /about
			template: `<div style="background: red">About Page</div>`
		}
		const HelpView = { // /help
			template: `<div style="background: yellow">Help Page</div>`
		}
		
		const ProductDetailView = { // /help
			template: `<div>
				<h1>ProductDetailView</h1>
				<h2>{{ $route.params._id }}</h2>
			</div>`,
			created() {
				// console.log(this.$router) // 路由的实例
				// console.log(this.$route) // 当前页面的信息
				console.log(this.$route)
			}
		}
		
		const NotFoundView = { // 
			template: `<div style="font-size: 80px; color: red; text-align: center">404</div>`
		}
		
		// 2. 定义路由
		const routes = [
			{ path: '/', alias: '/index', name: 'home', component: HomeView },
			// { path: '/index', redirect: '/' },
			// { path: '/index', redirect: { name: 'home', query: { from: 'index' } } },
			{ path: '/about', name: 'about', component: AboutView },
			{ path: '/help', name: 'help', component: HelpView },
			// { path: '/product/:_id', name: 'product-detail', component: ProductDetailView },
			{ 
				path: '/product/:_id/pname/:pn', 
				name: 'product-detail', 
				component: ProductDetailView ,
			},
			{ path: '/*', component: NotFoundView },
		]
		
		// 3. 创建 router 实例，然后传 `routes` 配置
		const router = new VueRouter({
			routes,
			mode: 'hash',
		})
		
		const app = new Vue({
			// 4. 创建和挂载根实例。
			router,
			data: {
				msg: "Hello Vue Router 路由！"
			},
		}).$mount("#app")
	</script>
</body>
</html>